<template>
  <Cabinet style="float: left;" @deviceOnClick="deviceOnClick" :device = "device1" title="自定义机柜组件"/>
  <Cabinet style="float: left;" @deviceOnClick="deviceOnClick" :device = "device2" title="自定义机柜组件"/>
  <Cabinet style="float: left;" @deviceOnClick="deviceOnClick" :device = "device3" title="自定义机柜组件"/>
</template>

<script>
import Cabinet from './components/Cabinet.vue'

export default {
  name: 'App',
  components: {
      Cabinet
  },
  setup(){
  return {
    device1 : [{id:1,name:"时统设备",location:2,height:2,img:"",state:1},{id:2,name:"采集设备",location:5,height:2,img:"",state:0} ],
    device2 : [{id:1,name:"时统设备",location:2,height:2,img:"",state:1},{id:2,name:"采集设备",location:5,height:2,img:"",state:0} ],
    device3 : [{id:1,name:"时统设备",location:2,height:2,img:"",state:1},{id:2,name:"采集设备",location:5,height:2,img:"",state:0} ]
  }
},
    methods:{
        deviceOnClick(deviceId){
           alert("点击了设备！id:"+deviceId)
        }
    }

}




</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
